.input-group-addon {
    // Newer Bootstrap does addons differently, added this in from older version.
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    // color: #495057;
    text-align: center;
    // background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    // Overwrite settings here down
    color: $c-pallette-text;
    background-color: $c-pallette-transp-light;
    border-color: $c-pallette-transp-light;

    &:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    &:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    &:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.form-control {
    color: $c-pallette-text;
    background-color: $c-pallette-neutral;
    border-color: $c-pallette-transp-light;

    &:focus {
        color: $c-pallette-text;
        background-color: $c-pallette-neutral;
        border-color: $c-pallette-accent;
        box-shadow: none;
    }
}

.form-control:disabled,
.form-control[readonly] {
    background-color: $c-pallette-neutral;
    color: $c-pallette-text-muted;
}

.merged-input-group {
    // .input-group:not(:first-child) > * {
    //     border-top: none;
    // }
    .input-group:not(:first-child):not(:last-child) > * {
        border-radius: 0;
    }

    .input-group:first-child > * {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .input-group:last-child > * {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}
